<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>4人员案例-深度监视</title>
        <!-- 引入Vue -->
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <!-- 准备好一个容器-->
        <div id="demo">
            <ul>
                <li>姓名:{{name}}</li>
                <li>性别:{{gender}}</li>
                <li>年龄:声称:{{age.foreignAge}},真实{{age.realAge}}</li>
            </ul>
            <button @click='changeAge'>声称年龄+1</button>
            <button @click='replaceAge'>替换age对象</button>
        </div>
    </body>

    <script type="text/javascript">
        //阻止 vue 在启动时生成生产提示。
        Vue.config.productionTip = false
        new Vue({
            el:'#demo',
            data:{
                name:'Ann',
                gender:'男',
                age:{
                    foreignAge:18,
                    realAge:30
                }
            },
            methods: {
                changeAge(){
                    this.age.foreignAge++
                },
                replaceAge(){
                    this.age = {foreignAge:100,realAge:200}
                }
            },
            watch: {
                // 'age.foreignAge':{
                //    handler(val){
                //   if(val!=18){
                //       this.age.realAge++;
                //   }
                //    }
                // }

                // 'age.foreignAge'(val){
                //   if(val!=18){
                //       this.age.realAge++;
                //     }
                // }

                 'age.foreignAge':{
					handler(){
						console.log('foreignAge被改变了')
					}
				}, 
                age:{
                    deep:true,
					handler(){
						console.log('age被改变了')
					}
				}, 
                
            }

        })
    </script>
</html>